<template>
    <a-card :bordered="false">
        <a-steps class="steps" :current="current">
            <a-step title="项目总览" />
            <a-step title="构建主要实体" />
            <a-step title="添加关系实体" />
            <a-step title="数据字典设计" />
            <a-step title="生成代码" />
            <a-step title="完成" />
        </a-steps>
        <div class="content">
            <step1 v-if="current === 0" :project="project" @nextStep="nextStep" ></step1>
            <step2 v-if="current === 1" :project="project" @nextStep="nextStep" @saveEntityList="saveEntityList" @prevStep="prevStep"></step2>
            <step3 v-if="current === 2" :project="project" @nextStep="nextStep" @saveRelationList="saveRelationList" @prevStep="prevStep"></step3>
            <step4 v-if="current === 3" :project="project" @nextStep="nextStep" @saveDictList="saveDictList" @prevStep="prevStep"></step4>
            <step5 v-if="current === 4" :project="project" @nextStep="nextStep" @prevStep="prevStep" @submit="generatorStart"></step5>
            <step6 v-if="current === 5" :project="project" @prevStep="prevStep" @finish="finish"></step6>
        </div>

        <a-modal v-model="validate.flag" title="出现了一些问题" @cancel="handleOk" @ok="handleOk">
            <p v-for="(item,index) in validate.msg" :key="index">{{item}}</p>
            <p>请检查关系列表里的参数！</p>
        </a-modal>


    </a-card>
</template>

<script>
    import Step1 from './step/Step1'
    import Step2 from './step/Step2'
    import Step3 from './step/Step3'
    import Step4 from './step/Step4'
    import Step5 from './step/Step5'
    import Step6 from './step/Step6'
    import {generatorService} from '@/services';

    export default {
        name: 'GeneratorForm',
        components: {Step1, Step2, Step3, Step4, Step5, Step6},
        data () {
            return {
                current: 0,
                project:{
                    name:'',
                    chName:'',
                    port:'',
                    dbName:'',
                    packageName:'',
                    projectJavaPattern: "true",
                    projectVuePattern: "false",
                    path:'',
                    entityVOList:[],
                    relationVOList:[],
                    dictList:[],
                },
                validate: {
                    flag:false,
                    msg: [],
                }
            }
        },
        methods: {
            nextStep () {
                if (this.current < 5) {
                    this.current += 1
                }
            },
            prevStep () {
                if (this.current > 0) {
                    this.current -= 1
                }
            },
            finish () {
                this.project = {
                    name:'',
                        chName:'',
                        port:'',
                        dbName:'',
                        packageName:'',
                        projectJavaPattern: "true",
                        projectVuePattern: "false",
                        path:'',
                        entityVOList:[],
                        relationVOList:[],
                        dictList:[],
                },
                this.validate = {
                    flag:false,
                    msg: [],
                }
                this.current = 0
            },

            changeProject(project) {
                this.project = project;
            },

            saveEntityList(entityList) {
                this.project.entityVOList = entityList;
            },

            saveRelationList(relationList) {
                this.project.relationVOList = relationList;
            },
            saveDictList(dictList) {
                this.project.dictList = dictList;
            },

            verify() {
                let flag = true;
                this.project.relationVOList.forEach(item => {
                    if (item.manyToManyFlag == 'true') {  // 多对多
                        item.manyEntityNameList.forEach(name => {
                            const entity = this.project.entityVOList.find(entityVO => entityVO.name == name);
                            if (entity == undefined) {
                                this.validate.msg.push(`${item.name}关系中：多对多实体${name}不存在`);
                                flag = false;
                            }
                        })
                    } else {
                        console.log(item.oneEntityName);
                        console.log(item.manyEntityName);
                        const entity = this.project.entityVOList.find(entityVO => entityVO.name == item.oneEntityName);
                        if (entity == undefined) {
                            this.validate.msg.push(`${item.name}关系中：一对多实体${item.oneEntityName}不存在`);
                            flag = false;
                        }
                        const entityM = this.project.entityVOList.find(entityVO => entityVO.name == item.manyEntityName);
                        if (entityM == undefined) {
                            this.validate.msg.push(`${item.name}关系中：一对多实体${item.manyEntityName}不存在`);
                            flag = false;
                        }
                    }
                });

                return flag;
            },

            handleOk() {
                this.current = 2;
                this.validate.flag = false;
                this.validate = {
                    flag:false,
                    msg: [],
                }
            },

            async generatorStart() {
                if (!this.verify()) {
                    this.current = 2;
                    this.validate.flag = true;
                    return;
                }
                // 调用后台，将project提交
                const result = await generatorService.generator(this.project);
                if (result.code == 200) {
                    // 生成成功
                    console.log('生成成功');
                } else {
                    // 生成失败
                    console.log('生成失败');
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .steps{
        max-width: 950px;
        margin: 16px auto;
    }
</style>
